<template>
    <div id="parts">
        <el-button @click="insertList" class="slot-btn-top" type="primary" size="small">添加</el-button>
        <el-table :data="listdata.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border :height="tableHeight" :header-cell-style="getRowClass">
            <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
            <el-table-column prop="name" label="产品名称" sortable min-width="350"></el-table-column>
            <el-table-column prop="factory" label="生产厂家" sortable min-width="280"></el-table-column>
            <el-table-column prop="type" label="类型" sortable min-width="130"></el-table-column>
            <el-table-column prop="typeNum" label="型号" sortable min-width="180"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" min-width="80">
                <template slot-scope="scope">
                    <el-button @click="updateList(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="listdata.length"></el-pagination>


        <el-dialog :title="dialogTitle" width="750px" center :visible.sync="isDialog" :close-on-click-modal="false">
            <el-form :inline="true" class="demo-form-inline" v-model="tableData" label-position="right" label-width="120px">
                <el-form-item label="产品名称"><el-input v-model="tableData.name"></el-input></el-form-item>
                <el-form-item label="生产厂家"><el-input v-model="tableData.factory"></el-input></el-form-item>
                <el-form-item label="类型"><el-input v-model="tableData.type"></el-input></el-form-item>
                <el-form-item label="型号"><el-input v-model="tableData.typeNum"></el-input></el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;"><el-button @click="submitList" type="primary">确 定</el-button></div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tokenId:sessionStorage.getItem("tokenId"),
                currentPage: 1,
                pagesize: 10,
                tableHeight: document.documentElement.clientHeight - 160,


                isDialog: false,
                listdata: [],
                tableData: {
                    id: '',
                    name: '',
                    factory: '',
                    type: '',
                    typeNum: ''
                },
                dialogTitle: ''
            };
        },
        created() {
            this.getProduceData()
        },
        methods: {
            getProduceData() {
                let _this = this;
                this.$http({
                    url: '/api/adscm/order/jyProduct/selectAll?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.listdata = res.data.content;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },
            insertList() {
                this.isDialog = true;
                this.dialogTitle = '添加信息';
                this.tableData = {
                    id: '',
                    name: '',
                    factory: '',
                    type: '',
                    typeNum: ''
                };
            },
            updateList(row) {
                this.isDialog = true;
                this.dialogTitle = '编辑信息';
                this.tableData = row;
            },

            submitList() {
                let _this = this;
                let url;
                if (this.dialogTitle === '添加信息') {
                    url = '/api/adscm/order/jyProduct/insert?tokenId=' + _this.tokenId;
                } else if (this.dialogTitle === '编辑信息') {
                    url = '/api/adscm/order/jyProduct/update?tokenId=' + _this.tokenId;
                }
                this.$http({
                    url: url,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    data: _this.tableData
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.isDialog = false;
                        _this.getProduceData();
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },



            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
            },

        }

    };
</script>

<style scoped>

</style>
